<template>
  <el-form-item label="年级" prop="classYear">
    <el-select
      v-model="classYear"
      placeholder="请选择年级"
      :schoolCampusId="schoolCampusId"
      :selectValue="selectValue"
      @change="handleChange"
      :multiple="multiple"
      clearable
    >
      <el-option v-for="(value,key) in grade" :key="key" :value="key" :label="value"></el-option>
    </el-select>
  </el-form-item>
</template>

<script setup>

import {  getclassesGrade } from "@/api/school/classes";


const emit = defineEmits(['schoolGrade']);
const grade = ref([]);
const selectValue = ref([]);
const schoolCampusId = ref("");
const classYear = ref([]);





const props = defineProps({
  selectValue: {
    type:  [String, Object, Array,Number],
    default: null,
  },
  schoolCampusId: {
    type:  [String, Object, Array,Number],
    default: null,
  },
  multiple: {
    type: Boolean,
    default: false
  }

});


watch(() => props.selectValue, val => {
  let v = props.selectValue == "" ? null : props.selectValue;
 if(v instanceof Array){
  classYear.value =v
}
else{
    classYear.value = grade.value [v]

}



}, { deep: true, immediate: true });

watch(() => props.schoolCampusId, val => {
   getGrade()
}, { deep: true, immediate: true });



function getGrade() {
if(props.schoolCampusId!=null){
  getclassesGrade(props.schoolCampusId).then(response => {
    grade.value = response.data;
    //在点击修改按钮的时候没有加载到班级数据的回显，手动对年级数据回显值进行处理，原因待查

    if(props.selectValue!=""&&props.selectValue instanceof Array){
      classYear.value = props.selectValue
    }else if(props.selectValue!=""){
      classYear.value = grade.value [props.selectValue]
    }
  });
}

}

function handleChange(data) {
  emit("schoolGrade", data == "" ? null : data);

}


getGrade();
</script>
